<template>
  <div>
    <Approver :businessId="businessId" :visible.sync="setApproverVisible" @closevisible="closevisible" :isUrgent="isUrgent" :isCloseUpper="isCloseUpper" v-on="$listeners"></Approver>
    <Urgent :visible.sync="urgentVisible" @submitUrgent="submitUrgent"  :businessId="businessId" :isCloseUpper="isCloseUpper" v-on="$listeners" @closevisible="closevisible"></Urgent>
  </div>
</template>

<script>
//审批表单
import Approver from './approver'
//加急
import Urgent from './urgent'
export default {
  components: {
    Approver,
    Urgent
  },
  props: {
    processConfig: {
      type: Number,
      default: 0
    },
    businessId: {
      type: String,
      default: ''
    },
    //是否关闭上级页面
    isCloseUpper:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      //是否加急
      isUrgent: false,
      // 加急
      urgentVisible: false,
      setApproverVisible: false
    }
  },
  created() {},
  watch: {
    // 监听模态流程配置值
    processConfig: {
      handler(val) {
        if (val * 1 === 1 || val * 1 === 2) {
          this.setApproverVisible = true
          this.isUrgent = val * 1 === 2 ? true : false
        } else if (val * 1 === 3) {
          this.urgentVisible = true
        } else if (val * 1 === 4 && this.isCloseUpper) {
           this.$multiTab.close()
        }
      }
    }
  },
  methods: {
    closevisible() {
      this.setApproverVisible = false;
      this.urgentVisible = false;
    },
    //加急确认提交
    submitUrgent() {
      this.urgentVisible = false
    },
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
.selectApprover {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .selectApprover-dropdown {
    position: fixed;
    z-index: 10000;
    right: 60px;
    top: 140px;
  }
  @{deep} .ant-menu-item {
    margin-bottom: 0;
  }
}
</style>
